<template>
  <div class="membet-select">
    <div class="source-area">
      <SourceList
        :value="currentValue"
        :navigation="navigation"
        :departList="departList"
        :personList="personList"
        @depart-click="handleToggle"
        @person-click="handleUserSelect"
      />
    </div>
    <div class="target-area">
      <div class="title">{{ $t("areaIndex.areaSearchSelected") }} {{ currentValue.length }} {{ $t("BodyTemperatureIndex.BodyTemAnimalMan") }}</div>
      <div class="list">
        <Empty v-if="currentValue.length === 0" />
        <div
          class="person-item"
          v-for="(user, idx) in currentValue" :key="idx"
          @click="handleUserSelect(user, false)"
        >
          <Icon class="item-icon" type="md-contact" size="24" />
          <div class="item-title">{{ user.username }}</div>
          <Icon class="close-icon" type="md-close-circle" size="22" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {
  mapState,
} from 'vuex'
import _ from 'lodash'
import {
  getList,
} from '@/api/person.js'

import Empty from './Empty'
import SourceList from './SourceList'

export default {
  components: {
    Empty,
    SourceList,
  },

  props: {
    value: {
      type: Array,
      default: () => ([]),
    },
  },
  data () {
    return {
      currentValue: [],

      departLoading: false,
      navigation: [],
      departList: [],
      personList: [],
      treeData: [],
    }
  },
  computed: {
    ...mapState('depart', [
      'list',
    ]),
  },

  watch: {
    currentValue (val) {
      if (!_.isEqual(val, this.value)) {
        this.$emit('input', val)
      }
    },
    value (val) {
      if (!_.isEqual(val, this.currentValue)) {
        this.currentValue = _.cloneDeep(val)
      }
    },
  },
  mounted () {
    this.getData()
  },

  methods: {
    handleUserSelect (user, status) {
      console.log(user, status)
      const { mid } = user
      const existIdx = _.findIndex(this.currentValue, user => user.mid === mid)
      if (status && existIdx === -1) {
        this.currentValue.push(_.cloneDeep(user))
      }
      if (!status && existIdx !== -1) {
        this.currentValue.splice(existIdx, 1)
      }
    },

    async getData () {
      // 通过vuex调接口获取公司名depart是vuex中别的一套vuex模块
      const list = await this.$store.dispatch('depart/getList')
      // const treeData = this.generateTreeData(list)
      // this.treeData = treeData
      console.log(list)
      this.handleToggle(list[0])
    },
    async handleToggle (depart) {
      console.log(depart)
      this.departLoading = true
      const { id, children } = depart
      var childrenArr = _.cloneDeep(children)
      if(!childrenArr){
        childrenArr=[]
      }
      const personArr = await this.getAllPersonList(id)

      const ifExist = _.findIndex(this.navigation, de => de.id === id)
      if (ifExist !== -1) {
        this.navigation = _.take(this.navigation, ifExist + 1)
      } else {
        this.navigation.push(depart)
      }
      this.departList = childrenArr
      this.personList = personArr
      this.departLoading = false
    },
    async getAllPersonList (depId) {
      const limit = 10000
      let result = []
      let page = 1
      let isTable = 2
      let ifTotal = false
      while (!ifTotal) {
        const { success, data } = await getList({
          depId,
          page,
          limit,
          isTable,
          sort:0,//新加
        })
        if (success && data) {
          const { count, pageNum } = data
          page = pageNum
          ifTotal = page * limit >= count
          page++
          result = _.concat(result, data.data)
        }
      }

      return result
    },
  },
}
</script>

<style lang="less" scoped>
.itemBase (@hei) {
  display: flex;
  padding: 0 4px;
  line-height: @hei;
  cursor: pointer;
  &:hover {
    background-color: fade(@clr-primary, 20%);
  }
  .item-icon {
    line-height: @hei;
    margin-right: 8px;
  }
  .ivu-icon {
    line-height: @hei;
  }
}
.membet-select {
  display: flex;
  height: 400px;

  .source-area,
  .target-area {
    flex: 1;
    flex-shrink: 0;
    border: 1px solid @clr-border;
    border-radius: 3px;
    padding: @padding-ver @padding-hov;
  }
  .source-area {
    margin-right: @padding-hov;
  }
  .target-area {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    .title {
      text-align: right;
    }
    .list {
      flex: 1;
      overflow-y: auto;
    }
  }

  .source-tree {
    /deep/ .ivu-tree-title {
      width: 100%;
      width: calc(100% - 21px);
    }
  }

  /deep/ .depart-item {
    .itemBase(36px);
    &:hover {
      .item-title {
        text-decoration: underline;
      }
    }
  }
  /deep/ .person-item {
    .itemBase(42px);
    .item-title {
      font-size: 14px;
    }
    .item-title {
      flex: 1;
    }
    .close-icon {
      color: @clr-text-secondary;
    }
  }
}
</style>
